<template>
    <div class="footer" :style="{ height: footerHeight }">
        <div class="footer-container">
            <div class="footer-item" :style="{ height: exploreMoreHeight }">
                <a>探索更多目的地</a>
                <button class="toggle-button" @click="toggleText">{{ buttonText }}</button>
                <div id="explore-more-link" v-show="showContent">
                    <a href="./pages/chengdu.html">成都</a>
                    <a href="./pages/nanjing.html">南京</a>
                    <a href="./pages/xian.html">西安</a>
                    <a href="./pages/guangzhou.html">广州</a>
                    <a href="./pages/dali.html">大理</a>
                </div>
            </div>
            <div class="footer-item">
                <a>更多服务</a>
            </div>
            <div class="footer-item">
                <a>关于我们</a>
            </div>
            <div class="footer-item">
                <a>联系我们</a>
            </div>
            <div class="information-item">
                <p>OneHouse 唯豪·畅享家 2023-2023 © 版权所有</p>
                <p>202225710122 王浩 > 202225710127 张程成 > 202225710129 周可涵</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const showContent = ref(false);
const buttonText = ref('展开');
const exploreMoreHeight = ref('50px');
const footerHeight = ref('240px');

const toggleText = () => {
    showContent.value = !showContent.value;
    buttonText.value = showContent.value ? '收起' : '展开';
    exploreMoreHeight.value = showContent.value ? '150px' : '50px';
    footerHeight.value = showContent.value ? '320px' : '240px';
};
</script>

<style scoped>
.footer{
    margin: 30px 0 5px;
    background-color: rgb(24, 24, 24);
    width: 100%;
    height: 240px;
    transition: height 0.3s ease;
}

.footer-container{
    margin: 0 240px;
    height: 100%;
    /* border: 1px yellow solid; */
    display: flex;
    flex-direction: column;
}

.footer-item{
    color: white;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 5px;
    height: 50px;
    border-bottom: 1.5px white solid;
    transition: height 0.3s ease;
}

#explore-more{
    color: white;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 5px;
    height: 50px;
    border-bottom: 1.5px white solid;
}

#explore-more-link{
    margin-left: 20px;
    width: 400px;
}

#explore-more-link > a{
    margin: 0 2px;
    color: white;
    text-decoration: none;
}

.toggle-button{
    position: relative;
    left: 20px;
    top: 11px;
    background-color: black;
    color: white;
    border: 2px white solid;
    border-radius: 5px;
    font-weight: bold;
}

.footer-item>a{
    position: relative;
    left: 20px;
    top: 12px;
}

.footer-item>div{
    position: relative;
    left: 20px;
    top: 30%;
}

.information-item{
    height: 50px;
}

.information-item>p{
    margin: 5px;
    color: white;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 5px;
}
</style>